<template>
  <div class="custom-node" :class="`node-${type}`" :style="{ borderColor: nodeConfig.color }">
    <!-- 左侧输入连接点 -->
    <Handle id="target" type="target" :position="Position.Left" />

    <div class="node-header" :style="{ backgroundColor: nodeConfig.color }">
      <el-icon :size="18">
        <component :is="nodeConfig.icon" />
      </el-icon>
      <span class="node-title">{{ data.label }}</span>
    </div>

    <div class="node-body">
      <div class="node-config-summary">
        <template v-if="type === 'create_experiment'">
          <div class="config-item" v-if="data.config.template_id">
            <span class="label">模板:</span>
            <span class="value">{{ data.config.template_id }}</span>
          </div>
          <div class="config-item" v-if="data.config.experiment_name">
            <span class="label">名称:</span>
            <span class="value">{{ data.config.experiment_name }}</span>
          </div>
        </template>

        <template v-else-if="type === 'download_data'">
          <div class="config-item" v-if="data.config.source_type">
            <span class="label">源类型:</span>
            <span class="value">{{ data.config.source_type }}</span>
          </div>
          <div class="config-item" v-if="data.config.source_path">
            <span class="label">源路径:</span>
            <span class="value">{{ data.config.source_path }}</span>
          </div>
        </template>

        <template v-else-if="type === 'data_processing'">
          <div class="config-item" v-if="data.config.api_name">
            <span class="label">API:</span>
            <span class="value">{{ data.config.api_name }}</span>
          </div>
        </template>

        <template v-else-if="type === 'condition_branch'">
          <div class="config-item">
            <span class="label">条件数:</span>
            <span class="value">{{ data.config.conditions?.length || 0 }}</span>
          </div>
        </template>
      </div>
    </div>

    <!-- 右侧输出连接点 -->
    <Handle id="source" type="source" :position="Position.Right" />
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { Handle, Position } from '@vue-flow/core'
import { getNodeConfig } from './nodeTypes'

const props = defineProps({
  data: {
    type: Object,
    required: true
  },
  type: {
    type: String,
    required: true
  }
})

const nodeConfig = computed(() => {
  return getNodeConfig(props.type) || {}
})
</script>

<style lang="scss" scoped>
.custom-node {
  min-width: 180px;
  background: white;
  border: 2px solid;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s;

  &:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
  }

  &.selected {
    box-shadow: 0 4px 16px rgba(64, 158, 255, 0.4);
  }

  .node-header {
    padding: 8px 12px;
    color: white;
    border-radius: 6px 6px 0 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;

    .node-title {
      font-size: 14px;
    }
  }

  .node-body {
    padding: 10px 12px;

    .node-config-summary {
      .config-item {
        font-size: 12px;
        margin-bottom: 4px;
        display: flex;
        gap: 4px;

        &:last-child {
          margin-bottom: 0;
        }

        .label {
          color: #909399;
          flex-shrink: 0;
        }

        .value {
          color: #303133;
          font-weight: 500;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }
}
</style>
